<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../com/NSCanvasStage.js"></script>
<script type="text/javascript">
	function Frame()
	{
		this.numW;
		this.numH;
		this.sizeW;
		this.sizeH;
		
		this.currentFrame		= 0;
		
		this.image;
		
		this._displayUpdateWithContext2D = function( context )
		{
			var x	= Math.floor( this.currentFrame%this.numW )*this.sizeW;
			var y	= Math.floor( this.currentFrame/this.numW )*this.sizeH;
			
			context.drawImage( this.image, x, y, this.sizeW, this.sizeH, 0, 0, this.sizeW, this.sizeH );
			
			if( ++this.currentFrame >= this.numW*this.numH )
			{
				this.currentFrame = 0;
			}
			
			//console.log(  this.image +"/"+x+":"+y );
		}
	}
	(function()
	{
		console.log( "ready!" );
		
		var _image 		= new Image(  );
		_image.src			= "../resource/visual.jpg";
		_image.onload	= function()
		{
			var _canvas 	= document.getElementById( "visual" );
			var _stage 	= new NSCanvasStage( _canvas );
			
			var _frame			= new Frame();
			_frame.numW		= 6;
			_frame.numH		= 12;
			_frame.sizeW		= _canvas.width;
			_frame.sizeH		= _canvas.height;
			_frame.image		= this;
			
			_stage.addChild( _frame );
			_stage.start();
		}
	} )();
</script>
</head>
	

<body>
	<canvas id="visual" width="600" height="224"></canvas>
</body>
</html>
